<template>
  <view v-if="shenheStatus == 0" class="write_off_card">
    <view class="tbas-box">
      <u-tabs
        active-color="#262626"
        :list="tabsList"
        :is-scroll="false"
        :current="tabsIndex"
        @change="tabsChange"
      ></u-tabs>
    </view>
    <view class="card_list">
      <view class="card-section" v-if="pageData.list.length">
				<view class="card-title">
					<view class="card-name">{{ card_type }}</view>
					<view class="card_edit" @click.stop="card_edit">{{ is_edit ? $t("cart.complate") : $t("mdAdmin.manage")}}</view>
				</view>
        <Card
					:list="pageData.list"
          :type="tabsIndex"
					:is_edit="is_edit"
					:is_all_select=is_select
					@all_select="all_select"
          @callBack="(i)=>pageData.list.splice(i,1)"
        >
        </Card>
      </view>

      <!-- 使用记录。添加卡 -->
      <view class="page-footer" v-if="!is_edit">
        <view class="foot-btns">
          <view
            class="use-history"
            @click="$utils.toUrl('/user/write_off_card/card-list/record-card')"
          >
            <i class="iconfont icon-jiaobiao"></i>
            <text>{{ $t("writeOff.records") }}</text>
          </view>
          <view
            class="add-card"
            @click="
              $utils.toUrl(
                '/user/write_off_card/card-list/add-card',
                'navigate'
              )
            "
          >
            <i class="iconfont icon-creditcard"></i>
            <text>{{ $t("user.addCard") }}</text>
          </view>
        </view>
				
      </view>
			<view class="page-footer page-footer-edit" v-else>
				<view class="edit-bottom">
					<view class="select-all" @click="selectAll">
						<i class="iconfont" 
						:class="is_select ? 'icon-success-fill':'icon-xuanzekuangmoren'" 
						:style="is_select ? 'color:#F0250E;': ''"></i>
						<text>全选</text>
					</view>
					<view class="delete-select" @click="del_card">
						<button>删除({{select_num}})</button>
					</view>
				</view>
			</view>
      <div style="margin: 24rpx 0">
        <u-loadmore
          @loadmore="getListData(true)"
          :status="pageData.isBottom ? 'nomore' : 'loadmore'"
        />
      </div>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import Card from "./components/card";
export default {
  components: {
    Card,
    Shenhe,
  },
  data() {
    return {
      tabsList: [],
      tabsIndex: 0,
      pageData: {
        page: 1, //当前页
        list: [], //当前页数据
        isBottom: false, //是否加载完毕
      },

      // list1: [], // 核销卡
      // list2: [], // 礼品卡
      // list3: [], //  储值卡
      // list4: [], // 虚拟卡
      // list5: [], // 视频卡
      type: "",
			num: 0,
			is_edit: false,
			is_select: false,
			select_num: 0
    };
  },

  onLoad(e) {
    if (e.type) {
      this.type = e.type;
      let title = "卡券";

      // type 1.核销卡 2.礼品卡 3.储值卡 4.虚拟卡 5.视频卡
      switch (parseInt(e.type)) {
        case 1:
          title = this.$t("user.card");
          break;

        case 2:
          title = this.$t("user.gift");
          break;

        case 3:
          title = this.$t("title.valueCard");
          break;

        case 4:
          title = this.$t("user.pass");
          break;

        case 5:
          title = this.$t("user.video");
          break;
      }

      uni.setNavigationBarTitle({
        title,
      });
    }

    this.tabsList = [
      {
        name: this.$t("writeOff.useableCard"),
      },
      {
        name: this.$t("writeOff.unuseableCard"),
      },
      {
        name: this.$t("writeOff.sharedCard"),
      },
    ];
    this.getListData(false);
    this.$utils.hideShareMenu()
  },

  methods: {


		all_select(item) {
			let {id} = item,
				list = this.pageData.list,
				index = list.findIndex(el=>el.id === id);
				
				if(index !== -1){
					let checked = true;
					if(list[index].is_select){
						checked = false;
					}
					
					this.$set(list[index],'is_select',checked);
				}
		},
    tabsChange(item) {
      this.tabsIndex = item;
      this.pageData = this.$options.data().pageData;
      this.getListData(false);
    },

    clearData(){
      this.pageData.page = 1
      this.pageData.list = [];
      this.getListData(false);
    },
    
    async getListData(isBottom) {
      try {
        // 是否触底加载
        if (!isBottom) {
          this.pageData = this.$options.data().pageData;
        }

        // 是否加载完毕
        if (this.pageData.isBottom) return;
        // 是否触底加载

        var formData = {
          status: this.tabsIndex,
          page: this.pageData.page,
          type: this.type,
        };
        const res = await this.$allrequest.coupon.verifyList(formData, true);
        // 数据添加
        this.pageData.list.push(...res.data.map(el=>{
					el.is_select = false;
					return el
				}));
        // 页码++
        this.pageData.page++;
        // 判断是否加载完毕
        this.pageData.isBottom = this.pageData.list.length >= res.num;
				this.num = res.num
      } catch (error) {
        this.$utils.toast(error.msg || error);
      }
    },
		card_edit() {
			this.is_edit = !this.is_edit
		},
		selectAll() {
			let list = this.pageData.list;
			
			this.is_select = !this.is_select
			
			list.forEach((value, index)=> {
				this.$set(value, 'is_select', this.is_select);
			})
		},
		del_card() {
			let list = this.pageData.list;
			let ids = '';
			list.forEach((value, index)=> {
				if (value.is_select) {
					ids += value.id +','
				}
			})
			if (ids !== '') {
				uni.showModal({
				  title: "提示",
				  content: "确认删除？",
				  success: (res) => {
				    if (res.confirm) {
				      this.$allrequest.coupon
				        .deleteCard({ ids: ids })
				        .then((res) => {
				          if (!res.code) {
				            uni.showToast({
				              title: "删除成功！",
				              duration: 2000,
				            });
				            setTimeout(() => {
				              uni.navigateBack();
				            }, 1500);
				          }
				        });
				    } else if (res.cancel) {
				    }
				  },
				});
			}
			
		}
  },
	computed: {
		card_type() {
			let type = parseInt(this.type);
			switch (type) {
				case 1:
					return `核销卡(${this.num})`;
				case 2:
					return `礼品卡(${this.num})`;
				case 3:
					return `储值卡(${this.num})`;
				case 4:
					return `虚拟卡(${this.num})`;
				case 5:
					return `视频卡(${this.num})`;
			}
		}
	},
  onReachBottom() {
    this.getListData(true);
  },
  watch: {
    pageData: {
      handler(val) {
				let num = 0;
				if(val && val.list &&val.list.length){
					let {list} = val,
						is_select = false;
						
					if(list.every(el=>el.is_select)){
						is_select = true;
						++num;
					}
					
					this.is_select = is_select;
					this.select_num = num;
				}
      },
      deep: true,
    },
  },

  onPullDownRefresh() {
    this.clearData();
  }
};
</script>

<style lang="scss" scoped>
/deep/.u-tab-bar {
  width: 50rpx !important;
  background: #f0250e !important;
}
.tbas-box {
  position: fixed;
  z-index: 999;
  width: 100%;
  left: 0;
  top: 0;
  height: 90rpx;
  padding-bottom: 10rpx;
  background: #fff;
}
.card_list {
  min-height: 100vh;
  padding-top: 90rpx;
  padding-bottom: calc(30rpx + env(safe-area-inset-bottom));

  background: #f2f2f2;
  .card-section {
    width: 100%;
    background-color: #ffffff;
    padding: 0 24rpx;
    margin-top: 24rpx;
    overflow: hidden;
		
    .card-title {
			padding-top: 24rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #8c8c8c;
			display: flex;
			justify-content: space-between;
			align-items: center;
      
    }
  }
  .page-footer {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 211;
    background: #ffffff;
    border-top: 1px solid #dddddd;
    .foot-btns {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: env(safe-area-inset-bottom);
      .use-history,
      .add-card {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 110rpx;
        .iconfont {
          color: #000000;
          font-size: 38rpx;
        }
        text {
          display: inline-block;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #262626;
          margin-left: 4rpx;
        }
      }
    }
		.edit-bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 24rpx 0;
			padding-bottom: env(safe-area-inset-bottom);
			.select-all {
				font-size: 24rpx;
				display: flex;
				align-items: center;
				.iconfont {
					font-size: 42rpx;
					margin-right: 10rpx;
				}
			}
			.delete-select {
				button {
					width: 226rpx;
					height: 76rpx;
					border-radius: 120rpx;
					font-size: 28rpx;
					line-height: 76rpx;
					font-weight: 600;
					color: #fff;
					background: #F0250E;
					margin-bottom: 10rpx;
				}
			}
		}
		
  }
	.page-footer-edit {
		border: 0;
		padding-bottom: constant(safe-area-inset-bottom);
	}
}
.title {
  font-size: 30rpx;
  margin: 20rpx 0;
}
.card-item {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 180rpx;
  border-radius: 20rpx;
  margin-bottom: 24rpx;
  margin-top: 24rpx;
  background: #d7d7d7;

  text-shadow: 0px 3rpx 6rpx rgba(0, 0, 0, 0.16);
  color: #fff;
  > image {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  > view {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 0 24rpx;

    .left {
      flex: 1;
      > image {
        width: 92rpx;
        height: 92rpx;
        background: #ffffff;
        border: 2rpx solid #f1f1f1;
        opacity: 1;
        border-radius: 120rpx;
      }
    }
  }
}

.card-add {
  padding: 0 40rpx;
  border: 2rpx solid #f1f1f1;
  background: #fff;
  color: #8c8c8c;
  height: 138rpx;
  > .iconfont {
    margin-right: 20rpx;
  }
  > text:nth-child(2) {
    flex: 1;
    font-size: 34rpx;
    font-weight: 600;
    color: #262626;
  }
}
</style>
